<template>
  <div class="template">
    <a-card
      class="sticky top-0 z-10"
      :bordered="false"
      :body-style="{ padding: '1rem', paddingTop: '0' }"
    >
      <div class="font-bold text-[1.5rem] flex justify-between items-center">
        <div>选择模板</div>
        <div>
          <SwitchIcon
            :hidden-icon="TableOutlined"
            :visible-icon="UnorderedListOutlined"
            v-model="column"
          ></SwitchIcon>
        </div>
      </div>
      <div class="mt-4">
        <a-input-search
          allow-clear
          placeholder="请输入模板名称"
          v-model:value="templateQuery.templateName"
          @search="search"
        ></a-input-search>
      </div>
      <div class="mt-4">
        <a-pagination
          v-model:current="templateQuery.pageNum"
          :page-size="templateQuery.pageSize"
          :total="templateQuery.total"
          size="small"
          @change="onChange"
        ></a-pagination>
      </div>
    </a-card>

    <a-spin :spinning="table.loading">
      <ul class="grid gap-4 p-4" :class="[`grid-cols-${column ? 1 : 2}`]">
        <li
          v-for="item in table.data"
          :key="item.templateId"
          :class="{ active: current === item.templateId }"
          class="cursor-pointer"
          @click="selectItem(item)"
        >
          <a-card :body-style="{ padding: '1rem' }">
            <template #cover>
              <XImage
                style="object-fit: contain"
                :height="column ? 160 : 96"
                :src="item.imgSrc"
              ></XImage>
            </template>
            <a-card-meta :title="item.templateName || '无标题'">
              <template #description>
                <div class="flex gap-2 items-center flex-nowrap text-nowrap">
                  {{ item.resolutionDesc }}
                  <a-divider type="vertical"></a-divider>
                  {{ item.resolutionWidth }} x {{ item.resolutionHeight }}
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </li>
      </ul>
    </a-spin>
  </div>
</template>

<script setup lang="ts">
import { listTemplate, type ITemplate } from '@/api/modules/esl/template';
import { useQuery, useTable } from '@/hooks/table';
import { TableOutlined, UnorderedListOutlined } from '@ant-design/icons-vue';

const props = defineProps<Partial<ITemplate>>();

const current = defineModel<string>('id');

const emit = defineEmits(['select']);

const templateQuery = useQuery<ITemplate>({ templateName: '' });
const column = ref(false);
const table = useTable<ITemplate>();

const getList = async () => {
  templateQuery.value = Object.assign(templateQuery.value, props);
  try {
    table.value.loading = true;
    const { data } = await listTemplate(templateQuery.value);
    templateQuery.value.total = data.total;
    table.value.data = data.rows;
    table.value.loading = false;
  } catch (error) {
    table.value.loading = false;
  }
};
const search = () => {
  templateQuery.value.pageNum = 1;
  getList();
};
const selectItem = (item: ITemplate) => {
  emit('select', item);
  current.value = item.templateId!;
};

const onChange = (page: number, pageSize: number) => {
  templateQuery.value.pageSize = pageSize;
  templateQuery.value.pageNum = page;
  getList();
};
onMounted(() => {
  templateQuery.value = Object.assign(templateQuery.value, props);
  getList();
});

defineExpose<{
  loadData: () => any;
}>({
  loadData: getList,
});
</script>

<style lang="scss" scoped>
:deep(.ant-card) {
  box-shadow: none;
  border-radius: 0;
  overflow: hidden;
}
.template {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  li {
    border: 1px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;
  }
}
.active {
  background: var(--primary);
  border: 1px solid var(--primary);
}
</style>
